<template>
  <el-scrollbar ref="scrollbarRef" @scroll="scrollHandle">
    <ParentCategoryMenu @click-column="switchCategoryHandle"></ParentCategoryMenu>
    <div id="secondRow">
      <DataSetSelector :key="refreshFlag" :category-id="categoryId"></DataSetSelector>
      <ImageSearcher></ImageSearcher>
    </div>
    <ImageFilter></ImageFilter>
    <ImagesViewer></ImagesViewer>
  </el-scrollbar>
  <Pager></Pager>
</template>

<script lang="ts" setup>
import { onActivated,  ref } from "vue"
import { ElScrollbar } from "element-plus"
import ParentCategoryMenu from "./ParentCategoryMenu.vue"
import DataSetSelector from "./DataSetSelector.vue";
import ImageSearcher from "./ImageSearcher.vue";
import Pager from "./Pager.vue";
import ImagesViewer from "./ImagesViewer.vue";
import ImageFilter from "./ImageFilter.vue";

const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
const scrollPosition = ref()

const scrollHandle = async ({ scrollTop }: any) => {
  scrollPosition.value = scrollTop
}

//当前大类别ID
const categoryId = ref<string>()
const refreshFlag = ref<number>(1)

onActivated(() => {
  scrollPosition.value && scrollbarRef.value!.setScrollTop(scrollPosition.value)
})

function switchCategoryHandle(id: string) {
  categoryId.value = id
  if (categoryId.value === id) {
    refreshFlag.value % 2 == 0 ? refreshFlag.value-- : refreshFlag.value++
  }
}


</script>

<style lang="scss" scoped>
#secondRow {
  margin-top: 10px;
  padding: {
    left: 30px;
    right: 50px
  };
  display: grid;
  grid-template-columns: repeat(3,1fr);
  justify-content: space-between;
}

</style>
